<template>
	<view class="page">
		<!-- 头部 -->
		<view class="header ex-mall-header" @touchmove.stop.prevent>
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">【🚚免運體驗，貨到付款】</view>
			<!-- #endif -->
			<view class="header-background" :class="[$themeClass('header-bg-color')]" :style="{opacity: headerOpacity}"></view>
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
<!--					<view class="ex-mall-header-btn" @click="toMessage" :class="[$themeClass('search-btn-bg-color')]">-->
<!--						<text class="ex-mall-header-btn-icon ri-message-line" :class="[$themeClass('header-btn-left-icon-another-color')]"></text>-->
<!--					</view>-->
				</view>
				<view class="ex-mall-header-title" :class="[$themeClass('header-title-color')]" :style="{opacity: headerOpacity}">【🚚免運體驗，貨到付款】</view>
				<view class="ex-mall-header-right">
					<view class="cart ex-mall-header-btn" :class="[$themeClass('search-btn-bg-color')]" @click="scrollOrderInfo">
						<text v-if="shoppingCartGoods.length === 0" class="ex-mall-header-btn-icon ri-shopping-cart-line" :class="[$themeClass('search-btn-color')]"></text>
						<text v-else class="ex-mall-header-btn-text" :class="[$themeClass('search-btn-color')]">{{shoppingCartGoods.length>99?'99+':shoppingCartGoods.length}}</text>
					</view>
				</view>
			</view>
		</view>

		<view id="goods_pictures" class="pictures" :style="{top: `${pictureTop}px`}">
			<swiper class="swiper" indicator-dots circular>
				<swiper-item class="swiper-item" v-for="(x, xi) in goods.pictureUrl ? goods.pictureUrl.split(',') : []" :key="xi">
					<view class="picture">
						<image class="img" mode="widthFix" :src="x"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="content" :class="[$themeClass('goods-content-bg-color')]">
			<view class="title" :class="[$themeClass('goods-title-color')]">{{ goods.name }}</view>
      <view class="price-item">
        <view v-if="goods.displayPrice" class="price" :class="[$themeClass('goods-price-color')]">NT${{ goods.displayPrice }}</view>
        <view v-else-if="priceSummary" class="price" :class="[$themeClass('goods-price-color')]">{{ priceSummary }}</view>
      </view>
      <view class="sell" v-if="goods.displaySell" >
        <view class="label">销量 {{ goods.displaySell }} 件</view>
        <u-line-progress
            class="value"
            :percent="90"
            active-color="#F76842"
            height="30px"
            :show-percent="false"
            :striped-active="true">
        </u-line-progress>
      </view>
			<view class="desc" :class="[$themeClass('goods-desc-color')]">{{ goods.summary }}</view>
			<view style="margin-top: 5px" class="desc" :class="[$themeClass('goods-desc-color')]">退貨包運費，全場免郵，7天無理由退貨</view>
      <view class="share">
        <view class="icon" @click="shareFacebook"><u-icon label="Share" name="facebook-circle-fill"></u-icon></view>
        <view class="icon" @click="shareLine" style="margin-left: 20px"><u-icon label="LINE" name="share-fill"></u-icon></view>
      </view>
      <u-subsection bg-color="white" active-color="#F76842" :list="subsectionList" :current=this.curNow @change="sectionChange"></u-subsection>
			<view class="details" v-if="goods.description !== '' && this.curNow === 0">
				<view class="details_content" v-html="goods.description"></view>
			</view>
      <view class="shipping" style="margin-top: 20px;" v-if="this.curNow === 1">
        <view>送貨及付款方式</view>
        <view style="margin-top: 15px">送貨方式</view>
        <view style="margin-top: 10px">7-11 超商取貨</view>
        <view>黑貓/新竹宅配</view>
        <view style="margin-top: 15px">付款方式</view>
        <view style="margin-top: 10px">宅配貨到付款</view>
        <view>7-11 取貨付款</view>
      </view>
      <view class="package" v-if="goodsPackageList.length !== 0">
        <view class="title" :class="[$themeClass('goods-title-color')]">套餐</view>
        <view class="content" v-for="(item, index) in goodsPackageList" @tap="handlePackageSelected(index)">
          <view class="item" v-if="goodsPackageSelectedIndex === index" :class="[$themeClass('goods-property-option-active')]">
            {{ item.name }}
          </view>
          <view class="item" v-else>
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="style_select" v-if="goodsPackageSelectedIndex !== ''">
        <view class="select_item" v-for="styleSelectIndex in goodsPackageList[goodsPackageSelectedIndex].goodsCount">
          <view class="title" :class="[$themeClass('goods-title-color')]">請選擇第{{ styleSelectIndex }}件規格</view>
          <view class="content">
            <view class="left">
              <view class="thumbnail">
                <image v-if="shoppingCartGoods[styleSelectIndex - 1].pictureUrl" @tap="previewImage(shoppingCartGoods[styleSelectIndex - 1].pictureUrl)" class="img" mode="aspectFill" :src="shoppingCartGoods[styleSelectIndex - 1].pictureUrl"></image>
                <image v-else @tap="previewImage(goods.pictureUrl)" class="img" mode="aspectFill" :src="goods.pictureUrl ? goods.pictureUrl.split(',')[0] : ''"></image>
              </view>
              <view class="info">
                <view class="title">{{goods.name}}<text class="spec"></text></view>
                <view class="title" v-if="shoppingCartGoods[styleSelectIndex - 1].value">
                  <text class="spec" v-for="(styleKey, i) in Object.keys(JSON.parse(shoppingCartGoods[styleSelectIndex - 1].value))">
                    <span v-if="i === 0">{{JSON.parse(shoppingCartGoods[styleSelectIndex - 1].value)[styleKey]}}</span>
                    <span v-else><span v-html="'&nbsp;-&nbsp;'"></span>{{JSON.parse(shoppingCartGoods[styleSelectIndex - 1].value)[styleKey]}}</span>
                  </text>
                </view>
                <view v-if="shoppingCartGoods[styleSelectIndex - 1].originalPrice" class="originalPrice" :class="[$themeClass('goods-original-price-color')]">NT$ {{ shoppingCartGoods[styleSelectIndex - 1].originalPrice }}</view>
                <view v-if="shoppingCartGoods[styleSelectIndex - 1].price" class="price" :class="[$themeClass('goods-price-color')]">NT$ {{ shoppingCartGoods[styleSelectIndex - 1].price }}</view>
                <view v-else class="price" :class="[$themeClass('goods-none-color')]"></view>
              </view>
            </view>
          </view>
          <view class="property">
            <view class="property-item" :key="styleKey" v-for="styleKey in Object.keys(goodsStyleDisplayList)">
              <view class="title" :class="[$themeClass('goods-title-color')]">{{ styleKey }}</view>
              <view class="option">
                <view class="option-item-for" :key="index" v-for="(styleItem, index) in goodsStyleDisplayList[styleKey]">
                  <view class="option-item" @tap="clickPackageStyle(styleSelectIndex, styleKey, styleItem)"
                        v-if="shoppingCartGoods[styleSelectIndex - 1] && !Object.keys(JSON.parse(shoppingCartGoods[styleSelectIndex - 1].value)).includes(styleKey) && index === 0"
                        :class="[$themeClass('goods-property-option-active')]">
                    {{ styleItem }}
                  </view>
                  <view class="option-item"
                        @tap="clickPackageStyle(styleSelectIndex, styleKey, styleItem)"
                        v-else-if="shoppingCartGoods[styleSelectIndex - 1] && JSON.parse(shoppingCartGoods[styleSelectIndex - 1].value)[styleKey] === styleItem"
                        :class="[$themeClass('goods-property-option-active')]">
                    {{ styleItem }}
                  </view>
                  <view class="option-item"
                        @tap="clickPackageStyle(styleSelectIndex, styleKey, styleItem)"
                        v-else-if="shoppingCartGoods[styleSelectIndex - 1] && JSON.parse(shoppingCartGoods[styleSelectIndex - 1].value)[styleKey] !== styleItem">
                    {{ styleItem }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="styleItem" v-else>
        <view class="title" :class="[$themeClass('goods-title-color')]">規格選取</view>
        <view class="content">
          <view class="left">
            <view class="thumbnail">
              <image @tap="previewImage(goodsPackageList[goodsPackageSelectedIndex].pictureUrl)" v-if="goodsPackageSelectedIndex !== '' && goodsPackageList[goodsPackageSelectedIndex].pictureUrl" class="img" mode="aspectFill" :src="goodsPackageList[goodsPackageSelectedIndex].pictureUrl"></image>
              <image @tap="previewImage(goodsStyle.pictureUrl)" v-else-if="goodsStyle.pictureUrl" class="img" mode="aspectFill" :src="goodsStyle.pictureUrl"></image>
              <image @tap="previewImage(goods.pictureUrl)" v-else class="img" mode="aspectFill" :src="goods.pictureUrl ? goods.pictureUrl.split(',')[0] : ''"></image>
            </view>
            <view class="info">
              <view class="title">{{goods.name}}<text class="spec"></text></view>
              <view class="title" v-if="goodsStyle.value">
                <text class="spec" v-for="(styleKey, i) in Object.keys(JSON.parse(goodsStyle.value))">
                  <span v-if="i === 0">{{JSON.parse(goodsStyle.value)[styleKey]}}</span>
                  <span v-else><span v-html="'&nbsp;-&nbsp;'"></span>{{JSON.parse(goodsStyle.value)[styleKey]}}</span>
                </text>
              </view>
              <view v-if="goodsStyle.originalPrice" class="originalPrice" :class="[$themeClass('goods-original-price-color')]">NT$ {{ goodsStyle.originalPrice }}</view>
              <view v-if="goodsStyle.price" class="price" :class="[$themeClass('goods-price-color')]">NT$ {{ goodsStyle.price }}</view>
              <view v-else class="price" :class="[$themeClass('goods-none-color')]"></view>
            </view>
          </view>
          <view class="right" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]" @click="addGoods">
            <view class="plus add">
              <text>添加訂單</text>
            </view>
          </view>
        </view>
      </view>
      <view class="property" v-if="goodsPackageList.length === 0">
        <view class="property-item" :key="styleKey" v-for="styleKey in Object.keys(goodsStyleDisplayList)">
          <view class="title" :class="[$themeClass('goods-title-color')]">{{ styleKey }}</view>
          <view class="option">
            <view class="option-item-for" :key="index" v-for="(styleItem, index) in goodsStyleDisplayList[styleKey]">
              <view class="option-item" @tap="clickStyle(styleKey, styleItem)"
                    v-if="!Object.keys(styleActive).includes(styleKey) && index === 0"
                    :class="[$themeClass('goods-property-option-active')]">
                {{ styleItem }}
              </view>
              <view class="option-item"
                    @tap="clickStyle(styleKey, styleItem)"
                    v-else-if="styleActive[styleKey] === styleItem"
                    :class="[$themeClass('goods-property-option-active')]">
                {{ styleItem }}
              </view>
              <view class="option-item"
                    @tap="clickStyle(styleKey, styleItem)"
                    v-else-if="styleActive[styleKey] !== styleItem">
                {{ styleItem }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="orderList">
        <view class="title" :class="[$themeClass('goods-title-color')]">訂單信息</view>
        <view class="content" v-for="(item, index) in shoppingCartGoods">
          <view class="left">
            <view class="thumbnail">
              <image @tap="previewImage(item.pictureUrl)" v-if="item.pictureUrl" class="img" mode="aspectFill" :src="item.pictureUrl"></image>
              <image @tap="previewImage(goods.pictureUrl)" v-else class="img" mode="aspectFill" :src="goods.pictureUrl ? goods.pictureUrl.split(',')[0] : ''"></image>
            </view>
            <view class="info" :style="goodsPackageSelectedIndex === '' ? '' : 'margin: 0 35px'">
              <view class="title">{{item.goodsName}}<text class="spec"></text></view>
              <view class="title" v-if="item.value">
                <text class="spec" v-for="(styleKey, i) in Object.keys(JSON.parse(item.value))">
                  <span v-if="i === 0">{{JSON.parse(item.value)[styleKey]}}</span>
                  <span v-else><span v-html="'&nbsp;-&nbsp;'"></span>{{JSON.parse(item.value)[styleKey]}}</span>
                </text>
              </view>
              <view v-if="item.originalPrice" class="originalPrice" :class="[$themeClass('goods-original-price-color')]">NT$ {{ item.originalPrice }}</view>
              <view v-if="item.price" class="price" :class="[$themeClass('goods-price-color')]">NT$ {{ item.price }}</view>
              <view v-else class="price" :class="[$themeClass('goods-none-color')]"></view>
            </view>
          </view>
          <view v-if="goodsPackageSelectedIndex === ''" class="right" @click="removeGoods(index)">
            <text>移除</text>
          </view>
        </view>
        <view v-if="shoppingCartGoods.length === 0">
          <u-empty text="暫無訂單信息" mode="list"></u-empty>
        </view>
        <view class="orderPrice">
          <view class="priceItem" style="padding-top: 10px">
            <view>小計</view>
            <view :class="[$themeClass('goods-price-color')]">NT$ {{ totalAmount }}</view>
          </view>
          <view class="priceItem">
            <view>運費</view>
            <view :class="[$themeClass('goods-price-color')]">NT$ {{ logisticFee }}</view>
          </view>
          <view class="priceItem" style="padding-bottom: 10px">
            <view>總計</view>
            <view :class="[$themeClass('goods-price-color')]">NT$ {{ totalAmount + logisticFee }}</view>
          </view>
        </view>
      </view>
      <view class="orderForm">
        <view class="transport">
          <view class="title" :class="[$themeClass('goods-title-color')]">運送方式</view>
          <view class="item">
            <u-radio-group
                class="radio"
                v-model="orderForm.shipTypeName"
                placement="column"
            >
              <u-radio
                  shape="circle"
                  v-for="(item, index) in shipTypes"
                  :key="index"
                  :name="item.name"
                  @change="shipTypeChange"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </view>
        </view>
        <view class="receiver">
          <view class="title" :class="[$themeClass('goods-title-color')]">收件人資訊</view>
          <view class="item">
            <u-input class="input" v-model="orderForm.name" placeholder="姓名"></u-input>
          </view>
          <view class="item">
            <u-input class="input" v-model="orderForm.phone" placeholder="行動電話號碼" type="number"></u-input>
          </view>
        </view>
        <view v-if="this.orderForm.shipTypeName === '宅配'" class="address">
          <view class="title" :class="[$themeClass('goods-title-color')]">運送地址</view>
          <view class="item">
            <view class="label">城市</view>
            <picker class="context" v-if="Object.keys(citys).length !== 0" @change="bindCityChange" :value="cityIndex" :range-key="'name'" :range="citys">
              <view>{{citys[cityIndex].name}}</view>
            </picker>
          </view>
          <view class="item">
            <view class="label">地區</view>
            <picker class="context" v-if="Object.keys(areas).length !== 0" @change="bindAreaChange" :value="areaIndex" :range-key="'name'" :range="areas">
              <view>{{areas[areaIndex].name}}</view>
            </picker>
          </view>
          <view class="item">
            <u-input class="input" v-model="orderForm.address" placeholder="詳細地址"></u-input>
          </view>
          <view class="item">
            <u-input class="input" v-model="orderForm.remark" placeholder="備注（選填）"></u-input>
          </view>
        </view>
        <view v-if="this.orderForm.shipTypeName === '超商7-11'" class="shopAddress">
          <view class="title" :class="[$themeClass('goods-title-color')]">運送方式</view>
          <view class="item">
            <view class="label">城市</view>
            <picker class="context" v-if="Object.keys(citys).length !== 0" @change="bindCityChange" :value="cityIndex" :range-key="'name'" :range="citys">
              <view>{{citys[cityIndex].name}}</view>
            </picker>
          </view>
          <view class="item">
            <view class="label">地區</view>
            <picker class="context" v-if="Object.keys(areas).length !== 0" @change="bindAreaChange" :value="areaIndex" :range-key="'name'" :range="areas">
              <view>{{areas[areaIndex].name}}</view>
            </picker>
          </view>
          <view class="item">
            <view class="label">門市</view>
            <picker class="context" v-if="Object.keys(shops).length !== 0" @change="bindShopChange" :value="shopIndex" :range-key="'name'" :range="shops">
              <view>{{shops[shopIndex].name}}</view>
            </picker>
          </view>
          <view class="item">
            <u-input class="input" v-model="orderForm.remark" placeholder="備注（選填）"></u-input>
          </view>
        </view>
        <view class="contact">
          <view class="title" :class="[$themeClass('goods-title-color')]">聯絡資訊</view>
          <view class="item">
            <u-input class="input" v-model="orderForm.email" placeholder="電子郵箱（選填）" type="mail"></u-input>
          </view>
        </view>
      </view>
      <view class="aboutUs" style="margin-top: 20px;">
        <u-collapse class="collapse" :item-style="{ textAlign: 'center', alignItems: 'center' }">
          <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
            <view v-html="item.body"></view>
          </u-collapse-item>
        </u-collapse>
      </view>
		</view>

		<view class="footer" ref="refFooter" id="goods_footer">
			<view class="btns">
				<view class="btn spec" @click="scrollSpec">
					<text>選擇規格</text>
					<text class="icon ri-arrow-right-s-fill"></text>
				</view>
				<view class="btn buy" @click="sendOrder" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
          <view class="label">立即下單</view>
				</view>
			</view>
		</view>

		<view class="cart-ball" :class="[$themeClass('search-btn-bg-color'), shoppingCartBallShow&&'show']" :style="{top: `${shoppingCartBall.y-10}px`, left: `${shoppingCartBall.x-10}px`}"></view>
    <u-modal :confirm-text="'確認'" :show-cancel-button="true" @cancel="this.orderConfirm=false" @confirm="confirmOrder" v-model="orderConfirm" :content="'確定訂單后, 訂單信息將發送至郵箱, 確認送出訂單?'"></u-modal>
	</view>
</template>

<script>
	import util from "../../common/js/util";
  import UInput from "../../libs/uview-ui/components/u-input/u-input";
  import URadio from "../../libs/uview-ui/components/u-radio/u-radio";
  import ULineProgress from "../../libs/uview-ui/components/u-line-progress/u-line-progress";
  import UModal from "../../libs/uview-ui/components/u-modal/u-modal";
  import UIcon from "../../libs/uview-ui/components/u-icon/u-icon";
  import UTag from "../../libs/uview-ui/components/u-tag/u-tag";
  import UImage from "../../libs/uview-ui/components/u-image/u-image";
  import USubsection from "../../libs/uview-ui/components/u-subsection/u-subsection";
  import UButton from "../../libs/uview-ui/components/u-button/u-button";
  import allCity from "static/json/cityCountyData.json";

  var transparentHeight = uni.getSystemInfoSync().windowWidth
	export default {
    components: {UButton, USubsection, UImage, UTag, UIcon, UModal, ULineProgress, URadio, UInput},
    data() {
			return {
        orderConfirm: false,
				headerOpacity: 0,
				pictureTop: 0,
				shoppingCartBall: {},
				shoppingCartBallShow: false,
				shoppingCartBallMoving: false,
        shoppingCartGoods: [],
				goods: {},
        goodsStyleFormatList: [],
        goodsStyleDisplayList: {},
        goodsStyleList: [],
        styleActive: {},
        packageStyleActives: [],
        goodsStyle: {},
        priceSummary: '',
        totalAmount: 0,
        logisticFee: 0,
        orderForm: {
          shipTypeName: '宅配',
          shipType: 1,
          email: ''
        },
        shipTypes: [
          {
            name: '宅配',
            value: 1,
            disabled: false
          },
          {
            name: '超商7-11',
            value: 2,
            disabled: false
          }
        ],
        citys: [],
        cityIndex: 0,
        areas: [],
        areaIndex: 0,
        shopIndex: 0,
        shops: [],
        itemList: [{
          head: "關於我們",
          body: "關於發貨/配送時間<br>" +
              "在下單成功之後，默認按照下單先後順序進行配貨/發貨，配貨週期為3個工作日左右，預計送達時間為7個工作日左右。<br><br>" +
              "關於退換貨處理<br>" +
              "一：由商品質量原因產生的退換貨請求：<br>" +
              "在收到商品之日起7日有效期內，向官方售後服務中心發送郵件至：<a href=mailto:piqiu5995@outlook.com'>piqiu5995@outlook.com</a>發送電子郵件（附上：訂單編號/姓名/訂購電話）客服會在收到郵件後的1-2個工作日處理您的請求。<br><br>" +
              "二：退換貨處理流程：<br>" +
              "確認收貨→發送郵件/在線聯繫官方客服人員→發出申請退換貨→客服審核通過→用戶寄出商品→儲物倉簽收驗貨→退換貨審核→直接退款/換貨。<br>" +
              "申請退貨時，請附上訂購編號、姓名、訂購電話。<br>",
          open: true,
          disabled: true
        },{
          head: "聯係我們",
          body: "感謝您的光臨！<br> 如果您對我們的產品有任何疑問<br>請在線或通過電子郵件<br>📮：<a href=mailto:piqiu5995@outlook.com'>piqiu5995@outlook.com</a>",
          open: false,
        }],
        webInfo: {},
        goodsPackageList: [],
        goodsPackageSelectedIndex: '',
        subsectionList: [
          {name: '商品描述'},
          {name: '送貨及付款方式'}
        ],
        curNow: 0,
        isMobile: true,
        allCityData: [],
        shipAddress: '',
			}
		},
		onPageScroll(e) {
			var scrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop
			var opacityCoefficient = scrollTop / transparentHeight
			var opacity = opacityCoefficient > 1 ? 1 : opacityCoefficient
			this.headerOpacity = opacity
			this.pictureTop = -scrollTop / 4
		},
    onLoad(options) {
      // #ifdef H5
      if (navigator.userAgent.indexOf('Mobile') === -1) {
        this.isMobile = false
      }
      // #endif
      this.getGoods(options.id)
      this.getWebInfo()
      this.getCitys()
      if (options.storeid) {
        this.shipTypeChange(this.shipTypes[1].name)
        this.orderForm.emapLabel = `${options.storename}(${options.storeid})`
        this.orderForm.emapValue = options.storeaddress
        this.formatAddress()
        this.recoverOrderForm(options.id)
      }
    },
    onReady() {
      // 如果是地图回调, 页面滚动至订单位置
      setTimeout(() => {
        if (this.orderForm.emapLabel && this.orderForm.emapLabel !== '') {
          this.scrollOrder()
        }
      }, 1000)

      // #ifdef H5
      if (navigator.userAgent.indexOf('Mobile') === -1) {
        this.pcWidthMatch()
      } else {
        document.getElementById('goods_footer').style.right = 0
        document.getElementById('goods_footer').style.left = 0
      }
      // #endif
    },
		methods: {
      previewImage(imgUrl) {
        const imgsArray = [];
        imgsArray[0] = imgUrl
        uni.previewImage({
          current: 0,
          urls: imgsArray
        });
      },
      pcWidthMatch() {
        document.querySelector('body').setAttribute('style', 'width: 420px;margin: 0px auto;position: relative;')

        document.getElementById('goods_footer').style.width = '364px'

        document.getElementById('goods_pictures').style.width = '420px'
        document.getElementById('goods_pictures').style.height = '420px'
      },
      // 用于从地图选取回到页面, 恢复表单内容
      recoverOrderForm(goodsId) {
        const orderForm = util.getStorage(`order_form_${goodsId}`)
        this.orderForm.email = orderForm.email
        this.orderForm.phone = orderForm.phone
        this.orderForm.name = orderForm.name
        this.orderForm.remark = orderForm.remark
      },
      async handlePackageSelected(index) {
        // this.goodsPackageSelectedIndex = this.goodsPackageSelectedIndex === index ? '' : index
        this.goodsPackageSelectedIndex = index
        await this.resetShoppingCars()
        this.calcTotal()
      },
      // 重置购物车
      resetShoppingCars() {
        util.removeStorage(`shopping_cart_${this.goods.id}`)
        const goodsCount = this.goodsPackageList[this.goodsPackageSelectedIndex].goodsCount
        this.shoppingCartGoods = []
        for (let i = 1; i <= goodsCount; i++) {
          this.shoppingCartGoods.push(this.goodsStyle)
        }
      },
      // 计算已添加的商品数量是否超过套餐的商品数量, 超出的商品需要移除
      reFreshShoppingCarsList() {
        if (this.goodsPackageSelectedIndex !== '') {
          if (this.shoppingCartGoods.length > this.goodsPackageList[this.goodsPackageSelectedIndex].goodsCount) {
            // 计算已添加商品超出套餐的数量
            const removeCount = this.shoppingCartGoods.length - this.goodsPackageList[this.goodsPackageSelectedIndex].goodsCount
            this.shoppingCartGoods.splice((this.shoppingCartGoods.length - removeCount), removeCount)
            util.setStorage(`shopping_cart_${this.goods.id}`, this.shoppingCartGoods)
          }
        }
      },
      computeLogisticsFee() {
        uni.$u.http.post('/api/order/compute-logistics-fee', {
          address: this.shipAddress
        }, {
          'content-type': 'application/x-www-form-urlencoded'
        }).then(res => {
          this.logisticFee = res.data
        })
      },
      handle711() {
        // 跳转地图前保存表单内容
        util.setStorage(`order_form_${this.goods.id}`, this.orderForm)

        const baseUrl = `https://${document.domain}/api/emap_callback?params=${document.domain},${this.goods.id}`
        if (this.isMobile === true) {
          document.write("<form method='post' action='https://emap.pcsc.com.tw/mobilemap/default.aspx' name='form'>")
          document.write("<input type='hidden' name='eshopparid' value='935'>")
          document.write("<input type='hidden' name='eshopid' value='001'>")
          document.write("<input type='hidden' name='eshoppwd' value='presco123'>")
          document.write("<input type='hidden' name='tempvar' value='K5WUa3ciOFw9'>")
          document.write("<input type='hidden' name='sid' value='001'>")
          document.write("<input type='hidden' name='storecategory' value='3'>")
          document.write("<input type='hidden' name='showtype' value='1'>")
          document.write("<input type='hidden' name='url' value='" + baseUrl + "'>")
          document.write("</form>")
          document.form.submit()
        } else {
          window.location = `https://emap.pcsc.com.tw/ecmap/default.aspx?eshopparid=935&eshopid=001&eshoppwd=presco123&tempvar=K5WUa3ciOFw9&sid=1&storecategory=3&showtype=1&url=${baseUrl}`
        }
      },
      sectionChange(index) {
        this.curNow = index;
      },
      getWebInfo() {
        uni.$u.http.get('/api/misc/web-info', {
          domain: document.domain
        }).then(async (res) => {
          this.webInfo = res.data
          this.webInfo.pixelList.map(pixel => {
            util.facebookHandle(pixel.pixel)
          })
        })
      },
      shareFacebook() {
        window.open(`https://www.facebook.com/sharer.php?u=${window.location.href}`, '_blank')
      },
      shareLine() {
        window.open(`https://social-plugins.line.me/lineit/share?url=${window.location.href}`, '_blank')
      },
      shipTypeChange(e) {
        this.orderForm.shipTypeName = e
        this.shipTypes.map(shipType => {
          if (e === shipType.name) {
            this.orderForm.shipType = shipType.value
          }
        })
      },
      bindCityChange: function(e) {
        this.cityIndex = e.detail.value
        this.areaIndex = 0
        this.shops = []
        this.getAreas(this.cityIndex)
        this.formatAddress()
      },
      bindAreaChange: function(e) {
        this.areaIndex = e.detail.value
        this.shopIndex = 0
        this.getShops()
        this.formatAddress()
      },
      bindShopChange: function(e) {
        this.shopIndex = e.detail.value
        this.formatAddress()
      },
      formatAddress() {
        this.shipAddress = this.orderForm.shipType === 1
            ? `${this.citys[this.cityIndex].name} · ${this.areas[this.areaIndex].name} · ${this.orderForm.address} `
            : `${this.shops[this.cityIndex] ? this.shops[this.cityIndex].name : ''}`
        this.computeLogisticsFee()
      },
      getCitys() {
        this.allCityData = allCity
        this.citys = this.allCityData.map(city => {
          return {
            name: city.CityName
          }
        })
        this.getAreas(this.areaIndex)
      },
      getAreas(index) {
        this.areas = this.allCityData[index].AreaList.map(area => {
          return {
            name: area.AreaName
          }
        })
        this.getShops()
      },
      getShops() {
        uni.$u.http.get('/api/misc/seven-eleven-list', {
              address: `${this.areas[this.areaIndex].name}`
            }
        ).then(async (res) => {
          const list = res.data
          this.shops = []
          list.map(item => {
            this.shops.push({
              name: `${item.name}(${item.serial}) - ${item.address}`
            })
          })
        })
      },
      clickStyle(key, item) {
        this.$set(this.styleActive, key, item)
        this.$forceUpdate()
        this.handlePrice()
      },
      clickPackageStyle(styleSelectIndex, key, item) {
        const styleActive = JSON.parse(this.shoppingCartGoods[styleSelectIndex - 1].value)
        styleActive[key] = item

        for (let i = 0; i <= this.goodsStyleList.length; i++) {
          const itemValue = util.kSort(JSON.parse(this.goodsStyleList[i].value))

          if (JSON.stringify(itemValue) === JSON.stringify(util.kSort(styleActive))) {
            this.$set(this.shoppingCartGoods, styleSelectIndex - 1, this.goodsStyleList[i])
            this.$forceUpdate()
            break
          }
        }
      },
      handleSummaryPrice() {
        if (this.goodsStyleList.length === 0) {
          this.priceSummary = 'NT$ 0'
          return
        }
        const goodsPriceList = this.goodsStyleList.map(item => {
          return item.price
        })
        const maxPrice = Math.max.apply(null, goodsPriceList)
        const minPrice = Math.min.apply(null, goodsPriceList)
        this.priceSummary = `NT$ ${minPrice} ~ NT$ ${maxPrice}`
        this.priceSummary = minPrice === maxPrice ? `NT$ ${maxPrice}` : `NT$ ${minPrice} ~ NT$ ${maxPrice}`
      },
      handlePrice() {
        try {
          this.goodsStyleList.map(item => {
            let match = true
            const goodsStyle = JSON.parse(item.value)
            Object.keys(this.styleActive).map(styleKey => {
              if (goodsStyle[styleKey] !== this.styleActive[styleKey]) {
                match = false
              }
            })
            if (match) {
              this.goodsStyle = item
              throw new Error('...')
            }
            this.goodsStyle = {}
          })
        } catch (e) {
          // ..
        }
      },
      getGoods(goodsId) {
        uni.$u.http.get('/api/goods/detail', {
              goodsId: goodsId
            }
        ).then(async (res) => {
          this.goods = res.data.goods
          document.title = this.goods.name
          if (Object.keys(this.goods).length === 0) {
            uni.showToast({
              icon: 'none',
              title: '商品錯誤'
            })
            return
          }
          // document.title = `${this.goods.name}`
          this.goodsStyleList = res.data.goodsStyles
          this.goodsPackageList = res.data.goodsPackages
          this.initShipTypes()
          await this.setGoodsStyles()
          await this.setStyleActiveDefault()
          await this.handlePrice()
          await this.handleSummaryPrice()
          if (this.goodsPackageList.length === 0) {
            await this.validateAndGetShoppingCarts()
          } else {
            await this.handlePackageSelected(0)
          }
          this.calcTotal()
        }).catch(() => {
          uni.showToast({
            icon: 'none',
            title: '商品錯誤'
          })
        })
      },
      // 如果仅允许宅配 => 更新配送方式
      initShipTypes() {
        if (this.goods.isOnlyHome && this.goods.isOnlyHome === 1) {
          this.shipTypes.splice(1, 1)
        }
      },
      // 初始化购物车
      validateAndGetShoppingCarts() {
        const storageShopCarts = util.getStorage(`shopping_cart_${this.goods.id}`)
        this.shoppingCartGoods = storageShopCarts ? storageShopCarts : []
        // 重新赋值购物车商品价格, 防止后台价格变动后购物车数据不变
        this.shoppingCartGoods.map((shoppingCart, index) => {
          const goodsStyleIds = this.goodsStyleList.map(goodsStyle => {
            if (goodsStyle.id === shoppingCart.id) {
              shoppingCart.price = goodsStyle.price
              shoppingCart.costPrice = goodsStyle.costPrice
              shoppingCart.value = goodsStyle.value
            }
            return goodsStyle.id
          })
          // 如果规格列表中不包含 => 移除该元素
          if (!goodsStyleIds.includes(shoppingCart.id)) {
            this.shoppingCartGoods.splice(index, 1)
          }
          util.setStorage(`shopping_cart_${this.goods.id}`, this.shoppingCartGoods)
        })

        if (this.goodsPackageList.length !== 0) {
          this.goodsPackageList.map((goodsPackage, index) => {
            if (goodsPackage.goodsCount === this.shoppingCartGoods.length) {
              this.goodsPackageSelectedIndex = index
            }
          })
          if (this.goodsPackageSelectedIndex === '') {
            this.goodsPackageSelectedIndex = 0
          }
          this.reFreshShoppingCarsList()
        }
      },
      setGoodsStyles() {
        this.goodsStyleList.map(goodsStyle => {
          const goodsStyleValueList = JSON.parse(goodsStyle.value)
          const goodsStyleKeyList = Object.keys(goodsStyleValueList)
          if (this.goodsStyleFormatList.length === 0) {
            this.goodsStyleFormatList = goodsStyleKeyList
          } else {
            goodsStyleKeyList.map(goodsStyleValue => {
              if (!this.goodsStyleFormatList.includes(goodsStyleValue)) {
                this.goodsStyleFormatList.push(goodsStyleValue)
              }
            })
          }
        })
        this.goodsStyleFormatList.map(goodsStyleType => {
          this.goodsStyleList.map(goodsStyle => {
            const goodsStyleValueList = JSON.parse(goodsStyle.value)
            const goodsStyleKeyList = Object.keys(goodsStyleValueList)
            goodsStyleKeyList.map(goodsStyleValue => {
              if (goodsStyleValue === goodsStyleType) {
                if (!this.goodsStyleDisplayList[goodsStyleType]) {
                  this.goodsStyleDisplayList[goodsStyleType] = []
                }
                if (this.goodsStyleDisplayList[goodsStyleType]
                    && !this.goodsStyleDisplayList[goodsStyleType].includes(goodsStyleValueList[goodsStyleValue])) {
                  this.goodsStyleDisplayList[goodsStyleType].push(goodsStyleValueList[goodsStyleValue])
                }
              }
            })
          })
        })
      },
      // 设置默认规格
      setStyleActiveDefault() {
        Object.keys(this.goodsStyleDisplayList).map(style => {
          this.styleActive[style] = this.goodsStyleDisplayList[style][0]
        })
      },
			scrollSpec() {
				if (this.goodsPackageList.length === 0) {
          uni.createSelectorQuery().select(".page").boundingClientRect(page => {
            uni.createSelectorQuery().select(".header").boundingClientRect(header => { //目标节点
              uni.createSelectorQuery().select(".content > .styleItem").boundingClientRect(property => {
                uni.pageScrollTo({
                  duration: 150,
                  scrollTop: property.top - page.top - header.height
                })
              }).exec()
            }).exec()
          }).exec()
        } else {
          uni.createSelectorQuery().select(".page").boundingClientRect(page => {
            uni.createSelectorQuery().select(".header").boundingClientRect(header => { //目标节点
              uni.createSelectorQuery().select(".content > .package").boundingClientRect(property => {
                uni.pageScrollTo({
                  duration: 150,
                  scrollTop: property.top - page.top - header.height
                })
              }).exec()
            }).exec()
          }).exec()
        }
			},
      scrollOrder() {
        uni.createSelectorQuery().select(".page").boundingClientRect(page => {
          uni.createSelectorQuery().select(".header").boundingClientRect(header => { //目标节点
            uni.createSelectorQuery().select(".content > .orderForm").boundingClientRect(property => {
              uni.pageScrollTo({
                duration: 150,
                scrollTop: property.top - page.top - header.height
              })
            }).exec()
          }).exec()
        }).exec()
      },
      scrollOrderInfo() {
        uni.createSelectorQuery().select(".page").boundingClientRect(page => {
          uni.createSelectorQuery().select(".header").boundingClientRect(header => { //目标节点
            uni.createSelectorQuery().select(".content > .orderList").boundingClientRect(property => {
              uni.pageScrollTo({
                duration: 150,
                scrollTop: property.top - page.top - header.height
              })
            }).exec()
          }).exec()
        }).exec()
      },
      removeGoods(i) {
        if (this.goodsPackageSelectedIndex !== '') {
          uni.showToast({
            icon: 'none',
            title: '抱歉, 套餐固定數量不可修改'
          })
          return
        }

        this.shoppingCartGoods.splice(i, 1)
        util.setStorage(`shopping_cart_${this.goods.id}`, this.shoppingCartGoods)
        this.calcTotal()
      },
			addGoods(e) {
        if (Object.keys(this.goodsStyle).length === 0) {
          uni.showToast({
            icon: 'none',
            title: '請選擇有效商品'
          })
          return
        }

        // if (this.goodsStyle.price === 0) {
        //   uni.showToast({
        //     icon: 'none',
        //     title: '該商品規格無貨，請挑選其他規格'
        //   })
        //   return
        // }

        if (this.goodsPackageSelectedIndex !== '' && this.goodsPackageList[this.goodsPackageSelectedIndex].goodsCount <= this.shoppingCartGoods.length) {
          uni.showToast({
            icon: 'none',
            title: '已達到套餐數量，快去下單吧'
          })
          return
        }

				if (this.shoppingCartBallMoving) return

				this.shoppingCartBallMoving = true
				this.shoppingCartBall = {
					x: e.detail.x,
					y: e.detail.y
				}
				this.shoppingCartBallShow = true
				uni.createSelectorQuery().select(".ex-mall-header-btn.cart").boundingClientRect(data => {
					setTimeout(() => {
						this.shoppingCartBall = {
							x: data.left + data.width / 2,
							y: data.top + data.height / 2
						}
					}, 10)
					setTimeout(() => {
						this.shoppingCartBallShow = false
						this.shoppingCartBallMoving = false
            this.shoppingCartGoods.push(this.goodsStyle)
            util.setStorage(`shopping_cart_${this.goods.id}`, this.shoppingCartGoods)
            this.calcTotal()
          }, 590)
				}).exec()
			},
      calcTotal() {
        if (this.goodsPackageSelectedIndex !== '') {
          this.totalAmount = this.goodsPackageList[this.goodsPackageSelectedIndex].price
          return
        }
        var totalAmount = 0
        let packageGoodsCount = 0
        let goodsPackage = {}

        if (this.goodsPackageList.length !== 0) {
          this.goodsPackageList.map(item => {
            if (this.shoppingCartGoods.length >= item.goodsCount && item.goodsCount >= packageGoodsCount) {
              packageGoodsCount = item.goodsCount
              goodsPackage = item
            }
          })
        }

        this.shoppingCartGoods.forEach((x, index) => {
          if (packageGoodsCount !== 0) {
            if (packageGoodsCount >= index + 1) {
              totalAmount = goodsPackage.price
            } else {
              totalAmount += x.price
            }
          } else {
            totalAmount += x.price
          }
        })
        this.totalAmount = totalAmount
      },
      confirmOrder() {
        // 再次格式化地址, 防止详细地址为空
        this.formatAddress()
        uni.$u.http.post('/api/order/submit', {
          associatedGoods: JSON.stringify(this.shoppingCartGoods),
          shippingAddress: this.shipAddress,
          shipType: this.orderForm.shipType,
          receiverName: this.orderForm.name,
          receiverPhone: this.orderForm.phone,
          receiverEmail: this.orderForm.email,
          remark: this.orderForm.remark
        }, {
          'content-type': 'application/json'
        }).then((res) => {
          const order = res.data
          if (Object.keys(order).length === 0) {
            uni.showToast({
              icon: 'none',
              title: '訂單創建失败!'
            })
            return
          }
          uni.showToast({
            icon: 'none',
            title: '訂單創建成功!'
          })
          setTimeout(() => {
            util.removeStorage(`shopping_cart_${this.goods.id}`)
            util.removeStorage(`order_form_${this.goods.id}`)
            this.shoppingCartGoods = []
            this.totalAmount = 0
            uni.navigateTo({
              url: `/pages/order/result?id=${order.id}`
            });
          }, 500)
        }).catch(e => {
          console.log(e)
          uni.showToast({
            icon: 'none',
            title: '服務器異常, 請聯係客服!'
          })
        })
      },
      sendOrder() {
        if (this.shoppingCartGoods.length === 0) {
          uni.showToast({
            icon: 'none',
            title: '請先添加訂單信息!'
          })
          this.scrollSpec()
          return
        }

        // 提交订单确认商品数量
        if (this.goodsPackageSelectedIndex !== '') {
          if (this.goodsPackageList[this.goodsPackageSelectedIndex].goodsCount !== this.shoppingCartGoods.length) {
            uni.showToast({
              icon: 'none',
              title: '請確認套餐商品數量!'
            })
            return
          }
        }

        if (this.validateOrderForm()) {
          this.orderConfirm = true
        } else {
          this.scrollOrder()
        }
      },
      validateOrderForm() {
        const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (this.orderForm.email !== '' && !reg.test(this.orderForm.email)) {
          uni.showToast({
            icon: 'none',
            title: '電子郵箱格式錯誤!'
          })
          return false
        } else if (!this.orderForm.name || this.orderForm.name === '') {
          uni.showToast({
            icon: 'none',
            title: '請填寫收件人姓名!'
          })
          return false
        } else if (!this.orderForm.phone || this.orderForm.phone === '') {
          uni.showToast({
            icon: 'none',
            title: '請填寫收件人行動電話號碼!'
          })
          return false
        } else if (this.citys.length === 0 && this.orderForm.shipType === 1) {
          uni.showToast({
            icon: 'none',
            title: '獲取城市信息失敗, 請聯係客服!'
          })
          return false
        } else if (this.areas.length === 0 && this.orderForm.shipType === 1) {
          uni.showToast({
            icon: 'none',
            title: '請選擇城市信息！'
          })
          return false
        } else if (this.orderForm.shipType === 2 && this.shops.length === 0) {
          uni.showToast({
            icon: 'none',
            title: '請選擇配送門市！'
          })
          return false
        } else if (this.orderForm.shipType === 1 && (!this.orderForm.address || this.orderForm.address === '')) {
          uni.showToast({
            icon: 'none',
            title: '請填寫運送詳細地址！'
          })
          return false
        } else {
          return true
        }
      }
		}
	}
</script>

<style lang="scss">
	.page {
		&>.header {
			.header-background {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: -1;
			}
		}

		&>.pictures {
			position: sticky;
			top: 0;
			z-index: 0;
			/* #ifndef MP-WEIXIN */
			margin-top: calc(-70px - var(--status-bar-height));
			/* #endif */
			/* #ifdef MP-WEIXIN */
			margin-top: calc(-70px - var(--status-bar-height) - 50px);
			/* #endif */
      width: 100vw;
      height: 100vw;

			&>.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					&:nth-child(3n-2) {
						.picture {
							&>.img {
								background-color: #5A9494;
							}
						}
					}

					&:nth-child(3n-1) {
						.picture {
							&>.img {
								background-color: #9B927D;
							}
						}
					}

					&:nth-child(3n) {
						.picture {
							&>.img {
								background-color: #96824C;
							}
						}
					}
				}

				.picture {
					width: 100%;
					height: 100%;

					&>.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}

			&>.btns {
				position: absolute;
				/* #ifndef MP-WEIXIN */
				top: calc(70px + var(--status-bar-height));
				/* #endif */
				/* #ifdef MP-WEIXIN */
				top: calc(70px + var(--status-bar-height) + 50px);
				/* #endif */
				right: 28px;
				display: flex;
				flex-direction: column;

				&>.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 38px;
					height: 38px;
					margin-bottom: 16px;
					border-radius: 12px;
					overflow: hidden;

					&>.icon {
						font-size: 18px;
					}
				}
			}
		}

		&>.content {
			position: relative;
			z-index: 1;
			//margin-top: -5px;
			padding: 0 28px calc(54px + 18px + 18px + (env(safe-area-inset-bottom) / 2)) 28px;
			//border-radius: 10px 10px 0 0;

			&>.title {
				padding-top: 34px;
				font-size: 23px;
				font-weight: 600;
			}

			&>.price-item {
        margin-bottom: 24px;
        &>.price {
          margin-top: 24px;
          font-size: 18px;
          font-weight: 600;
          display: inline-block;
        }

        &>.originalPrice {
          margin-top: 24px;
          font-size: 15px;
          font-weight: 600;
          text-decoration:line-through;
          display: inline-block;
          margin-right: 5px;
        }
      }

      &>.sell {
        &>.label {
          font-size: 17px;
          font-weight: 600;
          display: inline-block;
        }
        &>.value {
          margin-top: 10px;
          display: inline-block;
        }
      }

			&>.desc {
				margin-top: 18px;
				font-size: 13px;
			}

      &>.package {
        margin-top: 10px;
        &>.title {
          font-size: 14px;
          font-weight: 600;
        }
        &>.content {
          &>.item {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-width: 54px;
            margin: 12px 12px 0 0;
            padding: 12px 14px;
            line-height: 1.3;
            font-size: 13px;
            background-color: #F7F7F7;
            box-sizing: border-box;
            border-radius: 12px;
          }
        }
      }

			&>.property {
				&>.property-item {
					margin-top: 36px;

					&>.title {
						font-size: 14px;
						font-weight: 600;
					}

					&>.option {
						display: flex;
						flex-wrap: wrap;

						&>.option-item-for {
              &>.option-item {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                min-width: 54px;
                margin: 12px 12px 0 0;
                padding: 12px 14px;
                line-height: 1.3;
                font-size: 13px;
                background-color: #F7F7F7;
                box-sizing: border-box;
                border-radius: 12px;
              }
            }
					}
				}
			}

      &>.share {
        display: flex;
        justify-content: center;
        padding: 25px 0 15px 0;
      }

			&>.details {
				width: 100%;

				&>.title {
					margin-bottom: 12px;
					font-size: 14px;
					font-weight: 600;
				}
			}

      &>.shipping {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }

      &>.style_select {
        &>.select_item {
          &>.title {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 600;
          }

          &>.content {
            display: flex;
            justify-content: space-between;
            padding: 15px 15px 15px 15px;

            &:nth-child(4n-3) {
              &>.left {
                &>.thumbnail {
                  &>.img {
                    background-color: #ffffff;
                  }
                }
              }
            }

            &:nth-child(4n-2) {
              &>.left {
                &>.thumbnail {
                  &>.img {
                    background-color: #F8E3DC;
                  }
                }
              }
            }

            &:nth-child(4n-1) {
              &>.left {
                &>.thumbnail {
                  &>.img {
                    background-color: #A8A8A9;
                  }
                }
              }
            }

            &:nth-child(4n) {
              &>.left {
                &>.thumbnail {
                  &>.img {
                    background-color: #7F8688;
                  }
                }
              }
            }

            &>.left {
              display: flex;
              align-items: center;
              flex: 1;

              &>.thumbnail {

                &>.img {
                  display: block;
                  width: 88px;
                  height: 88px;
                  border-radius: 12px;
                }
              }

              &>.info {
                margin: 0 35px;
                line-height: 1;

                &>.title {
                  line-height: 1.3;
                  font-size: 15px;
                  font-weight: 600;
                  margin-bottom: 10px;

                  &>.spec {
                    margin-bottom: 10px;
                    font-size: 14px;
                    color: #808080;
                    overflow: hidden;
                    word-break: break-all;  /* break-all(允许在单词内换行。) */
                    text-overflow: ellipsis;  /* 超出部分省略号 */
                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                    -webkit-line-clamp: 2; /** 显示的行数 **/
                  }
                }

                &>.price {
                  font-size: 15px;
                  font-weight: 600;
                  display: inline-block;
                }

                &>.originalPrice {
                  font-size: 14px;
                  font-weight: 600;
                  text-decoration:line-through;
                  display: inline-block;
                  margin-right: 5px;
                }
              }
            }
          }

          &>.property {
            margin-left: 20px;
            &>.property-item {
              margin-top: 36px;

              &>.title {
                font-size: 14px;
                font-weight: 300;
              }

              &>.option {
                display: flex;
                flex-wrap: wrap;

                &>.option-item-for {
                  &>.option-item {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    min-width: 54px;
                    margin: 12px 12px 0 0;
                    padding: 12px 14px;
                    line-height: 1.3;
                    font-size: 13px;
                    background-color: #F7F7F7;
                    box-sizing: border-box;
                    border-radius: 12px;
                  }
                }
              }
            }
          }
        }
      }

      &>.styleItem {
        &>.title {
          margin-top: 15px;
          font-size: 14px;
          font-weight: 600;
        }

        &>.content {
          display: flex;
          justify-content: space-between;
          padding: 15px 15px 15px 15px;

          &:nth-child(4n-3) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #ffffff;
                }
              }
            }
          }

          &:nth-child(4n-2) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #F8E3DC;
                }
              }
            }
          }

          &:nth-child(4n-1) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #A8A8A9;
                }
              }
            }
          }

          &:nth-child(4n) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #7F8688;
                }
              }
            }
          }

          &>.left {
            display: flex;
            align-items: center;
            flex: 1;

            &>.thumbnail {

              &>.img {
                display: block;
                width: 88px;
                height: 88px;
                border-radius: 12px;
              }
            }

            &>.info {
              margin: 0 5px;
              line-height: 1;

              &>.title {
                line-height: 1.3;
                font-size: 15px;
                font-weight: 600;
                margin-bottom: 10px;

                &>.spec {
                  margin-bottom: 10px;
                  font-size: 14px;
                  color: #808080;
                  overflow: hidden;
                  word-break: break-all;  /* break-all(允许在单词内换行。) */
                  text-overflow: ellipsis;  /* 超出部分省略号 */
                  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                  -webkit-line-clamp: 2; /** 显示的行数 **/
                }
              }

              &>.price {
                font-size: 15px;
                font-weight: 600;
                display: inline-block;
              }

              &>.originalPrice {
                font-size: 14px;
                font-weight: 600;
                text-decoration:line-through;
                display: inline-block;
                margin-right: 5px;
              }
            }
          }

          &>.right {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 12px;

            &.plus {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 38px;
              height: 38px;
              margin-bottom: 16px;
              border-radius: 12px;

              &.add {
                flex: 0.6;
                margin-left: 10px;
              }
            }
          }
        }
      }

      &>.orderList {
        &>.title {
          margin-top: 15px;
          font-size: 14px;
          font-weight: 600;
        }

        &>.content {
          display: flex;
          justify-content: space-between;
          padding: 15px 15px 15px 15px;

          &:nth-child(4n-3) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #ffffff;
                }
              }
            }
          }

          &:nth-child(4n-2) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #F8E3DC;
                }
              }
            }
          }

          &:nth-child(4n-1) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #A8A8A9;
                }
              }
            }
          }

          &:nth-child(4n) {
            &>.left {
              &>.thumbnail {
                &>.img {
                  background-color: #7F8688;
                }
              }
            }
          }

          &>.left {
            display: flex;
            align-items: center;
            flex: 1;

            &>.thumbnail {

              &>.img {
                display: block;
                width: 88px;
                height: 88px;
                border-radius: 12px;
              }
            }

            &>.info {
              margin: 0 5px;
              line-height: 1;

              &>.title {
                line-height: 1.3;
                font-size: 15px;
                font-weight: 600;
                margin-bottom: 10px;

                &>.spec {
                  margin-bottom: 10px;
                  font-size: 14px;
                  color: #808080;
                  overflow: hidden;
                  word-break: break-all;  /* break-all(允许在单词内换行。) */
                  text-overflow: ellipsis;  /* 超出部分省略号 */
                  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                  -webkit-line-clamp: 2; /** 显示的行数 **/
                }
              }

              &>.price {
                font-size: 15px;
                font-weight: 600;
                display: inline-block;
              }

              &>.originalPrice {
                font-size: 14px;
                font-weight: 600;
                text-decoration:line-through;
                display: inline-block;
                margin-right: 5px;
              }
            }
          }

          &>.right {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 12px;

            border: 1px solid #292929;
          }
        }

        &>.orderPrice {
          background-color: #EBF0F5;
          border-radius: 5px;

          &>.priceItem {
            padding: 0 15px ;
            margin-top: 15px;
            margin-bottom: 15px;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
          }
        }
      }

      &>.orderForm {
        &>.contact {
          & > .title {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 600;
          }

          & > .item {
            margin-top: 15px;
            border-radius: 5px;
            border: 1px solid lightgrey;

            & > .input {
              margin-left: 10px;
            }
          }
        }

        &>.transport {
          & > .title {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 600;
          }

          & > .item {
            margin-top: 15px;

            & > .radio {
            }
          }
        }

        &>.receiver {
          & > .title {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 600;
          }

          & > .item {
            margin-top: 15px;
            border-radius: 5px;
            border: 1px solid lightgrey;

            & > .input {
              margin-left: 10px;
            }
          }
        }

        &>.address {
          & > .title {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 600;
          }

          & > .item {
            margin-top: 15px;
            border-radius: 5px;
            border: 1px solid lightgrey;
            display: flex;

            &> .input {
              margin-left: 10px;
            }

            & > .label {
              margin: 10px 0 10px 10px;
              font-size: 13px;
              color: lightgrey;
              width: 50px;
            }

            & > .context {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 10px;
              font-size: 13px;
            }
          }
        }

        &>.shopAddress {
          & > .title {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 600;
          }

          & > .item {
            margin-top: 15px;
            border-radius: 5px;
            border: 1px solid lightgrey;
            display: flex;

            &> .button711 {
              color: white;
              font-weight: 600;
              background-color: #F76842;
            }

            &> .input {
              margin-left: 10px;
            }

            & > .label {
              margin: 10px 0 10px 10px;
              font-size: 13px;
              width: 50px;
              color: lightgrey;
            }

            & > .context {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 10px;
              font-size: 13px;
            }
          }
        }

        &>.aboutUs {


          &>.collapse {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            font-size: 13px;
          }
        }
      }
		}

		&>.footer {
			position: fixed;
			bottom: 0;
			z-index: 2;
			padding: 18px 28px calc(18px + (env(safe-area-inset-bottom) / 2)) 28px;
			background-color: #FFFFFF;
			border-radius: 34px 34px 0 0;
			overflow: hidden;

			&>.btns {
				display: flex;

				&>.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 54px;
					font-size: 13px;
					font-weight: 600;
					border-radius: 12px;

					&.spec {
						flex: 0.4;
						border: 1px solid #292929;
						box-sizing: border-box;

						&>.icon {
							font-size: 16px;
						}
					}

					&.buy {
						flex: 0.6;
						margin-left: 10px;
					}
				}
			}
		}

		.cart-ball {
			position: fixed;
			z-index: 300;
			display: none;
			width: 20px;
			height: 20px;
			border-radius: 100%;
			transition: all 0.5s;
			box-shadow: 0 4px 8px #4D4D4D;

			&.show {
				display: block;
			}
		}
	}
</style>

<style lang="scss" scoped>
.details_content {
  ::v-deep {
    img {
      max-width: 100%;
      display: flex; // 去除图片间隙
    }
    iframe {
      max-width: 100%;
    }
    video {
      max-width: 100%;
    }
  }
}
</style>
